<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand" @click="tableshow" :class="{'textactive' : !secondshow}">入职人员信息表</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div style="float: left;width: 55%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 :</h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                <el-select
                  v-model="customername"
                  placeholder="请选择客户名称"
                  @change="selectname"
                  style="margin-right: 10px;"
                >
                  <el-option
                    v-for="item in customerNames"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="interviewtrack1 right1" style="float: right;">
            <el-input
              style="margin-right: 30px;"
              v-model.trim="searchword"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="search"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                style="cursor: pointer;"
                @click="search"
              ></i>
            </el-input>
            <el-button class="edit" size="small" @click="edit" round>修改</el-button>
            <el-button class="download" size="small" @click="download" round>下载</el-button>
            <!-- 添加上传文件功能 -->
            <el-button type="primary" size="small" round @click="dialogVisible=true">考勤处理</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23" class="posttable2">
          <el-table
            class="resumetable"
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column width="100" label="姓名">
              <template slot-scope="scope">
                <a
                  :href="scope.row.picture"
                  style="cursor: pointer;text-decoration: none;color: #1099ff;"
                  target="_blank"
                  v-if="scope.row.picture"
                >{{scope.row.name}}</a>
                <span v-if="!scope.row.picture">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" prop="sex" label="性别"></el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column prop="id_card" label="身份证号"></el-table-column>
            <el-table-column width="100" prop="position" label="职位"></el-table-column>
            <el-table-column width="100" prop="level" label="级别"></el-table-column>
            <el-table-column width="100" prop="graduation_time" label="毕业时间"></el-table-column>
            <el-table-column prop="area" label="地区"></el-table-column>
            <el-table-column label="薪资">
              <template slot-scope="scope">{{scope.row.salary}}k*{{scope.row.salary_num}}</template>
            </el-table-column>
            <el-table-column prop="project" label="项目"></el-table-column>
            <el-table-column prop="project_charger" label="项目负责人"></el-table-column>
            <el-table-column prop="sale_charger" label="销售负责人"></el-table-column>
            <el-table-column prop="entry_time" label="入职时间"></el-table-column>
            <el-table-column prop="admission_time" label="进场时间"></el-table-column>
            <el-table-column prop="depature_time" label="退场时间"></el-table-column>
            <el-table-column prop="recommender" label="推荐人"></el-table-column>
          </el-table>
          
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 上传文件弹框 -->
    <el-dialog title="上传文件" :visible.sync="dialogVisible" width="30%" style="font-size:15px;font-weight:bolder"
               @close="uploadclose()">
      <!-- 年月选择   -->
      <el-form :rules="uprules" :model="form" ref="form">
        <el-form-item label="请选择上传时间" prop="uploadtime">
          <el-date-picker
            value-format="yyyy-MM"
            format="yyyy-MM"
            v-model="form.uploadtime"
            type="month"
            placeholder="请选择上传时间"
            style="width:100%;"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <!--  上传文件-->
      <el-row>
        <el-col>
          <el-upload
            ref="upload"
            type="file"
            action
            :before-upload="beforeupload"
            :on-change="handleChange"
            :auto-upload="false"
            :file-list="fileList"
            :limit="2"
            accept=".xlsx"
          >
            <el-button class="upload" slot="trigger">选取文件</el-button>
            <el-button style="margin-left: 10px;" type="success" @click="submitload" :disabled="subdis">生成文件</el-button>
            <el-button @click="uploadclose" type="warning">取 消</el-button>
            <div
              v-if="selectfile"
              style="color: #F56C6C;color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;"
            >请上传文件!
            </div>
            <!-- <el-button type="success" @click="downloadtest">下载文件</el-button> -->
          </el-upload>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <br>
      </span>
    </el-dialog>
    <!--    修改在职人员数据-->
    <div v-if="type == 1">
      <edit-employinfo
        ref="EditEmployinfo"
        v-show="addShow"
        @getlist="getList"
        :current-data="currentRow"
      ></edit-employinfo>
    </div>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何入职人员!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import EditEmployinfo from "./editemployinfo";
  
  export default {
    name: "employinfosheet",
    data() {
      return {
        customername: "",
        customerNames: [],
        searchword: "",
        tableData: [],
        currentPage: 1,
        currentRow: null,
        pagesize: 15,
        totalcount: null,
        secondshow: false,
        secondtitle: "",
        addShow: false,
        type: null,
        errordialogVisible: false,
        dialogVisible: false,
        form: {
          uploadtime: "",
        },
        fileData: [],
        fileList: [],
        subdis: false,
        selectfile: false,
        file: {},
        param: new FormData(),
        uprules: {
          uploadtime: [
            {required: true, message: '请选择时间', trigger: 'change'}
          ],
        }
      };
    },
    created() {
      axios.post(this.url + "/resumeUpload/getCustomerNames").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
          this.customername = this.customerNames[0].name;
          this.getList();
        }
      });
    },
    methods: {
      uploadclose() {
        this.selectfile = false;
        this.fileList = [];
        this.file = {};
        this.dialogVisible = false;
        this.$refs.form.resetFields();
        document.documentElement.style.overflow = 'auto';
      },
      handleChange(file, fileList) {
        this.selectfile = false;
        this.file = file;
        this.fileList.push(this.file);
      },
      // 上传文件
      beforeupload(file) {
        // this.file = file;
        // this.fileList.push(this.file);
        this.param.append("file", file);
        return false;
      },
      submitload() {
        
        if (this.fileList.length > 0 && this.fileList.length != null) {
          // console.log('111'+this.fileList.length)
          this.$refs.form.validate((valid) => {
            if (valid && !this.selectfile) {
              this.subdis = true;
              let year = this.form.uploadtime.split("-")[0];
              let month = this.form.uploadtime.split("-")[1];
              this.param.append("year", year);
              this.param.append("month", month);
              //this.param.append("file",this.fileData);
              let config = {
                headers: {
                  // multipart/form-data
                  "content-type": "application/form-data"
                }
              };
              this.$refs.upload.submit();
              axios
                .post(this.url + "/statistics/entryInfo/multiUpload", this.param, config)
                .then(res => {
                  // console.log(res.data);
                  if (res.data.code == 200) {
                    this.subdis = false;
                    this.$message.success("上传成功");
                    window.location.href = this.url + "/statistics/entryInfo/download";
                    this.dialogVisible = false
                    document.documentElement.style.overflow = 'auto';
                    
                  } else if (res.data.code == -550) {
                    this.subdis = false;
                    this.$message.error("上传失败");
                    this.fileList = []
                    // this.param = new FormData();
                  } else if (res.data.code == -200) {
                    this.subdis = false;
                    this.$message.error("一次需上传两个文件");
                    this.fileList = []
                  }
                  this.param = new FormData();
                })
            }
          });
          
        } else {
          // console.log('222'+this.fileList.length)
          this.selectfile = true
        }
      },
      getList() {
        axios
          .post(this.url + "/statistics/entryInfo/getList", {
            customer: this.customername,
            condition: this.searchword,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.addShow = false;
              this.secondshow = false;
            }
          });
      },
      selectname() {
        this.currentPage = 1;
        this.getList();
      },
      search() {
        this.currentPage = 1;
        this.getList();
      },
      //elementUI的表格事件,获取当前表格行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //修改表格分页的展示条数
      handleSizeChange(val) {
        this.pagesize = val;
        this.getList();
      },
      //修改表格分页的当前页
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      tableshow(row) {
        this.type = null;
        this.addShow = false;
        this.secondtitle = "";
        this.secondshow = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.currentRow = null;
      },
      edit() {
        if (this.currentRow == null) {
          document.documentElement.style.overflow = "hidden";
          this.errordialogVisible = !this.errordialogVisible;
        } else {
          this.type = 1;
          this.addShow = !this.addShow;
          this.secondtitle = "修改入职人员信息";
          this.secondshow = true;
          if (this.$refs.EditEmployinfo) {
            this.$refs.EditEmployinfo.resetFields("form");
            this.$refs.EditEmployinfo.initdata();
          }
        }
      },
      download() {
        axios.post(this.url + "/statistics/entryInfo/downloadExcel").then(res => {
          this.unlogin(res.data.code);
          if (res.data.code !== -1) {
            window.location.href =
              this.url + "/statistics/entryInfo/downloadExcel";
          }
        });
      },
      handleClose(done) {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = "auto";
      }
    },
    components: {
      EditEmployinfo
    },
    watch: {
      searchword: function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.getList();
        }
      }
    }
  };
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .edit {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .edit:focus {
    color: #fff !important;
  }
  
  .download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
  
  .download:hover {
    color: #fff !important;
  }
  
  .download:focus {
    color: #fff !important;
  }
  
  .hand {
    cursor: pointer;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .textactive {
    color: #1099ff;
  }
</style>
